function  newMakeTreeData(tree,tempDataSet,tempType,flag,preType)
{
    tree['data'] = tempDataSet;
    tree['typelist']=tempType;
    tree['flag'] = flag;
    tree['preType'] = preType;
    let feature = tree['feature'];
    let threshold = tree['threshold'];
    let left_subData=[];
    let left_Type=[];
    let right_Type=[];
    let right_subData=[];
    let que_value=[];
    let que_typeList=[];
    let left_preType=[];
    let right_preType=[];
    for (let i=0;i<n_cluster;i++)
    {
        que_value[i] = 0
    }

    for(let i =0;i<tempDataSet.length;i++)
    {
        que_value[tempType[i]]++;
        if (tree['children'])
        {
             if(tempDataSet[i][feature]<=threshold)
            {
                left_subData.push(tempDataSet[i]);
                left_Type.push(tempType[i]);
                left_preType.push(preType[i])
            }
            else
            {
                right_subData.push(tempDataSet[i]);
                right_Type.push(tempType[i]);
                right_preType.push(preType[i])
            }
        }


    }
    tree['que_value'] = que_value;
    que_value.forEach((d,i)=>{
        let obj ={};
        obj['index'] = i;
        obj['data'] = d;
        que_typeList.push(obj);
    });
    que_typeList.sort((a,b)=>{
        return b.data-a.data;
    })
    tree['que_typelsit'] = que_typeList;

    if (tree['children'])
    {
         tree['mid_line'] = left_subData.length;
        newMakeTreeData(tree['children'][0],left_subData,left_Type,"left",left_preType);
        newMakeTreeData(tree['children'][1],right_subData,right_Type,"right",right_preType);
    }
    else
    {
        let l = parseInt(Object.keys(tree['center'])[0]);
        for (let i=0;i<preType.length;i++)
        {
            preTypelist[preType[i]] = l;
        }
    }
    return tree;



}
function makeTreeData(feature,right,left,threshold,que_value,retdata){
    //定义每个决策树结点name:id,data:数据点数组，feature:特征，que_value:不同类的点数数组
    //threshold:属性划分点，parent:父结点id，children：子结点
    var Denode = function (name,data,feature, que_value, threshold, parent, children,flag) {
        this.name = name;
        this.data=data;
        this.feature = feature;
        this.que_value = que_value;
        this.threshold = threshold;
        this.parent = parent;
        this.children = children;
        this.typelist=[];
        this.flag = flag;
    };
    //var dectree = [];
    var dectree_tmp = [];
    var parent_list = [];
    //确定每个结点的父结点
    parent_list[0] = null;
    for (var i = 0; i < right.length; i++) {
        if (right[i] > 0) {
            parent_list[right[i]] = i;
        }
        if (left[i] > 0) {
            parent_list[left[i]] = i;
        }

    }
    //存储结点数组
    for (var i = 0; i < feature.length; i++) {
        dectree_tmp.push(new Denode(i,[],feature[i], que_value[i][0], threshold[i], parent_list[i], [],""));
    }
    //console.log(dectree_tmp);
    //dectree[0]=dectree_tmp[0];
    //赋予根结点data数组，其子结点逐层划分
    dectree_tmp[0].data=analyDataSet;
    dectree_tmp[0].typelist = analyTypelist;
    dectree_tmp[0].flag = "root";
    //对left.right数组做一边遍历，将每个结点的子结点的引用加入到结点的childran数组
    //对每个结点的data数组进行划分，根据划分的属性feature和阈值threshold进行划分
    for (var i = 0; i < feature.length; i++) {
        var sub_data=[];
        if (left[i] > 0) {
            dectree_tmp[i].children.push(dectree_tmp[left[i]]);
            dectree_tmp[left[i]].flag = "left";
            sub_data = dectree_tmp[i].data.filter(function(d){
                //console.log(d);
                return d[dectree_tmp[i].feature]< dectree_tmp[i].threshold;
            });
            sub_typelist= dectree_tmp[i].typelist.filter(function(d,j){
                //console.log(d);
                return dectree_tmp[i].data[j][dectree_tmp[i].feature]< dectree_tmp[i].threshold;
            });
            dectree_tmp[left[i]].data=sub_data;
            dectree_tmp[left[i]].typelist = sub_typelist;

            //dectree_tmp[i].da
        }
        if (right[i] > 0) {
            dectree_tmp[i].children.push(dectree_tmp[right[i]]);
            dectree_tmp[right[i]].flag = "right";
            sub_data = dectree_tmp[i].data.filter(function (d) {
                return d[dectree_tmp[i].feature]>dectree_tmp[i].threshold;
            });
            sub_typelist = dectree_tmp[i].typelist.filter(function (d,j) {
                return dectree_tmp[i].data[j][dectree_tmp[i].feature]>dectree_tmp[i].threshold;
            });
            dectree_tmp[right[i]].data=sub_data;
            dectree_tmp[right[i]].typelist=sub_typelist;
        }

    }

    //console.log(dectree_tmp[0]);
    //treeData是参考决策树的数据名称，直接利用这个接口
    return  dectree_tmp[0];
}
function drawBasicTreeChart(data){
    /* ----------------------------配置参数------------------------  */
    const chart = new Chart();
    const config = {
        margins: {top: 50, left: 10, bottom: 100, right: 10},
        textColor: 'black',
        title: '基础树图',
        hoverColor: 'gray',
        animateDuration: 1000,
        pointSize: 5,
        pointFill: 'white',
        pointStroke: 'red',
        paddingLeft: 0,
        lineStroke: 'gray'
    }
    chart.margins(config.margins);
    chart.width(660);
    chart.height(800);
    chart.rectScale = d3.scaleLinear()
                    .domain([0,data.data.length])
                    .range([0,90 ]),
    /* ----------------------------数据转换------------------------  */
    chart._nodeId = 0;  //用于标识数据唯一性

    const root = d3.hierarchy(data);

    const generateTree = d3.tree()
                    .size([chart.getBodyWidth(),chart.getBodyHeight()]);

    generateTree(root);

    /* ----------------------------渲染节点------------------------  */
    chart.renderNode = function(){

        const groups = chart.body().selectAll('.g')
                                    .data(root.descendants(), (d) => d.id || (d.id = ++chart._nodeId));

        const groupsEnter = groups.enter()
                                    .append('g')
                                    .attr('class', (d) => 'g g-' + d.id)
                                    .attr('transform-origin', (d) => {    //子树从点击位置逐渐放大
                                        if (d.parent){
                                            return chart.oldX + config.paddingLeft + ' ' + chart.oldY;
                                        }
                                        return d.x + config.paddingLeft + ' ' + d.y;
                                    })
                                    .attr('transform', (d) => {    //首次渲染进入不放缩
                                        if (d.parent && chart.first) return 'scale(0.01)' + 'translate(' + (chart.oldX + config.paddingLeft) + ',' + chart.oldY + ')';
                                        return 'scale(1)' + 'translate(' + (d.x + config.paddingLeft) + ',' + d.y + ')';
                                    })
                groupsEnter.append("rect").attr("width",100)
                    .attr("class","borderRect")
                            .attr("height",35)
                            .attr("fill",(d,i)=>{
                                if (d.data.fouse)
                                {
                                    return "red"
                                }
                                else
                                {
                                    return "#fffdfd";
                                }})
                            .attr("x",-50)
                            .attr("y",-30)
                            .attr("rx",5)
                            .attr("ry",5)
                            .style("stroke","#71ef91")
                            .style("stroke-opacity",0.9)
                            .style("fill-opacity",0.1);
                groupsEnter.append("text")
                            .attr("x",0)
                            .attr("y",-17)
                            .attr("font-size",12)
                     .attr('text-anchor', 'middle')
                    .attr("font-weight","bold")
                            .text((d,i)=>{
                                sign = "";
                                if(d.data.flag=="left")
                                    sign="<=";
                                else
                                    sign=">";
                                if(d.parent!=null)
                                {
                                    return featureNames[d.parent.data.feature]+sign+d.parent.data.threshold;
                                }
                            });

                groupsEnter.each(function (d,i){
                    if(d.data.children) {
                        let  rectdiv = d3.select(this).append("rect").attr("width",100)
                                .attr("height",55)
                            .attr("class","borderRect")
                                .attr("fill",(d,i)=>{
                                if (d.data.fouse)
                                {
                                    d.data.fouse = 0;
                                    return "red"
                                }
                                else
                                {
                                    return "#fffdfd";
                                }

                                })
                                .attr("x",-50)
                                .attr("y",5)
                                .attr("rx",5)
                                .attr("ry",5)
                                .style("stroke","#71ef91")
                             .style("stroke-opacity",0.9)
                                .style("fill-opacity",0.1);
                       d3.select(this).append("rect").attr("x",-45).attr("y",8).attr("width",90).attr("height",15)
            .style("fill","#7ba285").style("stroke","#2f2123").attr("fill-opacity",0.3);
                        let misData = makeDivison(d.data.feature,d.data.threshold,d.data);
                        //  datamax = d3.max(divsionData,(d)=>{
                        //     return Math.max(d[1],d[0]);
                        // });
                        //  divsionScale = d3.scaleLinear().domain([0,datamax]).range([0,45]);
                        //  const areas =   d3.select(this).selectAll('.rect').data(divsionData);
                        //  areas.enter().append("rect").attr("x",(d)=>(-divsionScale(d[0])))
                        //     .attr("y",(d,i)=>i*10+26).attr("width",(d)=>divsionScale(d[0]))
                        //     .attr("height",10).attr("fill",(d,i)=>chart._colors[parseInt(d[2])+1]);
                        // areas.enter().append("rect").attr("x",0)
                        //     .attr("y",(d,i)=>i*10+26).attr("width",(d)=>divsionScale(d[1]))
                        //     .attr("height",10).attr("fill",(d,i)=>chart._colors[parseInt(d[2])+1]);
                        //  areas.enter().append("text").attr("x",function (d,i) {
                        //         if(d[3]==1)
                        //         {
                        //             return 3+divsionScale(d[1]);
                        //         }
                        //         else
                        //         {
                        //              return -divsionScale(d[0])-20;
                        //         }
                        //
                        //     })
                        //     .attr("y",(d,i)=>i*10+35)
                        //     .attr("font-size",10)
                        //     .text((d)=>d[d[3]]);
                        d3.select(this).append("line").attr("x1",0).attr("x2",0).attr("y1",8)
                            .attr("y2",22).style("stroke","black").attr("stroke-width",2);
                        let center = d.data.center;
                        let leftcenterlist = [];
                        let rightcenterlist=[];
                        for (k in center) {
                            if (center[k][d.data.feature]<d.data.threshold)
                            {
                                leftcenterlist.push({'index': k, 'value': center[k]});
                            }
                            else
                            {
                                rightcenterlist.push({'index': k, 'value': center[k]});
                            }
                        }

                        let arc=d3.arc()
                            .innerRadius(0)
                            .outerRadius(5);
                        for (let i=0;i<leftcenterlist.length;i++)
                        {


                           d3.select(this).append('path'). attr("d",arc.startAngle(0).endAngle(Math.PI*2*misData[leftcenterlist[i].index]))
                               .attr("transform",(d)=>"translate("+(-10-i*10)+",15)")
                                .attr('fill',chart._colors[parseInt(leftcenterlist[i].index)+1])
                                .attr("stroke","black");
                        }
                        for (let i=0;i<rightcenterlist.length;i++)
                        {
                            d3.select(this).append('path'). attr("d",arc.startAngle(0).endAngle(Math.PI*2*misData[rightcenterlist[i].index]))
                               .attr("transform",(d)=>"translate("+(10+i*10)+",15)")
                                .attr('fill',chart._colors[parseInt(rightcenterlist[i].index)+1])
                                .attr("stroke","black");
                        }
                    //     stream = makeStreamData(d.data, 0, d.data.feature);
                    //     var data = stream.data;
                    //     var types = stream.type;
                    //     tempscaleX = d3.scaleLinear()
                    //         .domain([d3.min(data,function (d) {
                    //             return d.feature;
                    //         }),d3.max(data,function (d) {
                    //             return d.feature;})])
                    //         .range([0, 80]);
                    //     let dis = Math.floor(d3.max(data,function (d) {
                    //              tmp = 0;
                    //             for(type of types)
                    //                 tmp+=d[type]
                    //             return tmp;
                    //         }))+1;
                    //     tempscaleY = d3.scaleLinear()
                    //     .domain([-dis/2,dis/2])
                    //     .range([50, 0])
                    //     tempstack = d3.stack()
                    //                     .keys(types)
                    //                     .order(d3.stackOrderInsideOut)
                    //                     .offset(d3.stackOffsetSilhouette);
                    //     var maxnum = tempstack(data);
                    //
                    //     const areas = d3.select(this).insert('g')
                    //         .selectAll('.area')
                    //         .data(maxnum);
                    //     const area = d3.area().x( (d,i)=>tempscaleX(d.data.feature))
                    //             .y0((d) => tempscaleY(d[0]))
                    //             .y1((d) => tempscaleY(d[1]))
                    //             .curve(d3.curveCardinal.tension(0));
                    //     areas.enter()
                    //         .append('path')
                    //         .attr('dx',10)
                    //         .attr('class', (d) => 'area area-' + d.key)
                    //     .merge(areas)
                    //         .style('fill', function(d){
                    //                 return chart._colors[parseInt(d.key.slice(4))+1];
                    //         })
                    //          .attr('transform', (d) => 'translate(-40,15)')
                    //         .attr('d', area);
                    //
                    // d3.select(this).insert('line').attr("x1",tempscaleX(d.data.threshold)-40)
                    //         .attr('y1',15).attr("x2",tempscaleX(d.data.threshold)-40).attr("y2",55)
                    //     .style("stroke","black").style("stroke-width",1);
                    d3.select(this).append("text")
                    .attr("x",0)
                    .attr("y",35)
                    .attr("font-size",10)
                         .attr('text-anchor', 'middle')
                    .attr("font-weight","bold")
                            .text((d,i)=>featureNames[d.data.feature]+'='+d.data.threshold);

                        let arc1=d3.arc()
                            .innerRadius(0)
                            .outerRadius(12);
                     d3.select(this).append('path'). attr("d",arc1.startAngle(0).endAngle(Math.PI*2*(1-d.data.mistake/d.data.data.length)))
                           .attr("transform",(d)=>"translate(0,48)")
                            .attr('fill',"#56b056");
                     d3.select(this).append("text")
                    .attr("x",0)
                    .attr("y",55)
                         .attr('text-anchor', 'middle')
                    .attr("font-weight","bold")
                    .attr("font-size",10)
                            .text((d,i)=>(1-d.data.mistake/d.data.data.length).toFixed(2));
                    }
                    else{
                         d3.select(this).append("rect").attr("width",100)
                            .attr("height",35)
                              .attr("class","borderRect")
                            .attr("fill",(d,i)=>{
                                if (d.data.fouse)
                                {
                                     d.data.fouse = 0;
                                    return "red"
                                }
                                else
                                {
                                    return "#fffdfd";
                                }

                        })
                            .attr("x",-50)
                            .attr("y",5)
                            .attr("rx",5)
                            .attr("ry",5)
                            .style("stroke","#71ef91")
                            .style("stroke-opacity",0.9)
                            .style("fill-opacity",0.1);
                         let typeID = Object.keys(d.data.center)[0];
                         let confidence = (d.data.que_value[typeID]/d.data.data.length).toFixed(2);
                         let support = (d.data.que_value[typeID]/typeInfo[typeID]).toFixed(2);
                          d3.select(this).append("text")
                              .attr("x",20)
                              .attr("y",0)
                              .attr("font-size",10)
                              .text(confidence);
                          let arcPath = d3.arc().innerRadius(10).outerRadius(14)
                              .startAngle(0)
                              .endAngle(Math.PI*2*support);
                          d3.select(this).append("path")
                              .attr("d", arcPath)
                              .attr('transform', 'translate(0,22)')
                              .attr("fill",chart._colors[parseInt(typeID)+1]);
                           d3.select(this).append("text")
                                .attr("x",-10)
                                .attr("y",27)
                                .attr("font-size",10)
                                .text(support);
                    }
                });
              // groupsEnter.append('circle')
              //               .attr('r', config.pointSize)
              //               .attr('cx', 0)
              //               .attr('cy', 0)
              //               .attr('fill', config.pointFill)
              //               .attr('stroke', config.pointStroke);
              //
              // groupsEnter.merge(groups)
              //               .transition().duration(config.animateDuration)
              //               .attr('transform', (d) => 'translate(' + (d.x + config.paddingLeft) + ',' + d.y + ')')
              //               .select('circle')
              //                   .attr('fill', (d) => d._children ? config.hoverColor : config.pointFill);

            rects = groupsEnter.selectAll('.rect').data((d) => {
              dataIn =   d.data.que_typelsit;
              dataOut = [];
              var pos = 0;
              for (i = 0;i<dataIn.length;i++)
              {
                    dataOut.push({value:dataIn[i].data,
                        color:dataIn[i].index,
                        name:d.data.name,
                        feature:d.data.feature,
                        threshold:d.data.threshold,
                        position:pos,
                        center:d.data.center,
                        width:d3.sum(dataIn,(d)=>d.data),
                        data:d.data.data});
                    pos+=dataIn[i].data;
              }
              return dataOut;
            });

                rectEnter= rects.enter().append('rect').attr("class","rect")
                    .attr('width',(d) => chart.rectScale(d.value))
                    .attr('height',10)
                    .attr('fill',  (d,i) => chart._colors[d.color+1])
                    // .attr('fill-opacity',function (d,i){
                    //     if(d.center[d.color]!=undefined)
                    //         return 1;
                    //     else
                    //         return 0.5;
                    // })
                    .attr('x',(d) =>{
                        return chart.rectScale(d.position)-chart.rectScale(d.width)/2;
                    })
                    .attr('y',-10);
                // rects.enter().each(function (d,i){
                //     if(d.center[i]!=undefined)
                //     {
                //
                //         d3.select(this).append("circle")
                //             .attr('cx',(d) =>d.position/2-d.width/4+d.value/4)
                //             .attr('cy',-5)
                //             .attr('r',5)
                //             .attr('fill',chart._colors[i+1])
                //             .attr("stroke","white");
                //     }
                //
                // });
                rects.exit().remove();


              groupsEnter.merge(groups)
                            .transition().duration(config.animateDuration)
                            .attr('transform', (d) => 'translate(' + (d.x + config.paddingLeft) + ',' + d.y + ')');
              groups.exit()
                        .attr('transform-origin', (d) => (chart.targetNode.x + config.paddingLeft) + ' ' + chart.targetNode.y)  //子树逐渐缩小到新位置
                        .transition().duration(config.animateDuration)
                        .attr('transform', 'scale(0.01)')
                        .remove();


    }

    /* ----------------------------渲染文本标签------------------------  */
    chart.renderText = function(){
        d3.selectAll('.text').remove();

        const groups = d3.selectAll('.g');

        groups.append('text')
              .attr('class', 'text')
              .text((d) => d.data.name + ":"+ d.data.feature +" <" +Math.round( d.data.threshold*100)/100)
              .attr('dy', function(){
                  return chart.textDy || (chart.textDy = this.getBBox().height/4);
              })
              .attr('text-anchor', (d) =>{
                  return d.children ? 'end' : 'start';
              })
              .attr('dx', (d) =>{
                return d.children ? -config.pointSize*1.5 : config.pointSize*1.5;
            });
    }

    /* ----------------------------渲染连线------------------------  */
    chart.renderLines = function(){
        const nodesExceptRoot = root.descendants().slice(1);
        chart.body().selectAll('.link').remove();
        const links = chart.body().selectAll('.link')
                                .data(nodesExceptRoot, (d) => d.id || (d.id = ++chart._nodeId));
        links.enter().each(function (d,i){
            thislink= d3.select(this);
            offset =0;

                for(let i=0;i<d.data.que_typelsit.length;i++)
                {

                    offset1 = -d.data.data.length/2+offset+d.data.que_typelsit[i].data/2;
                     if(d.data.flag=="left")
                     {
                         offset2 = -d.parent.data.data.length/2+offset+d.data.que_typelsit[i].data/2;
                     }
                     else
                     {
                         offset2 = -d.parent.data.data.length/2+d.parent.data.mid_line+offset+d.data.que_typelsit[i].data/2;
                     }
                    thislink
                    .insert('path', '.g')
                         .attr('class', 'link')
                         .attr('transform-origin', (d) => {
                            if (d.parent){           //连线从点击位置逐渐放大
                                return chart.oldX + config.paddingLeft + ' ' + chart.oldY;
                            }
                            return d.x + config.paddingLeft + ' ' + d.y;
                        })
                        .attr('transform', (d) => {                //首次渲染进入不放缩
                            if (d.parent && chart.first) return 'scale(0.01)';
                            return 'scale(1)';
                        })
                         .transition().duration(config.animateDuration)
                         .attr('d', (d) => {
                            return generatePath(d, d.parent,chart.rectScale(offset1),chart.rectScale(offset2));
                         })
                         .attr('transform', 'scale(1)')
                         // .attr('transform', 'translate('+chart.rectScale(offset1)+' ,0)')
                         .attr('fill', 'none')
                         .attr('stroke', chart._colors[d.data.que_typelsit[i].index+1])
                         .attr('stroke-width',chart.rectScale(d.data.que_typelsit[i].data));
                    offset+=d.data.que_typelsit[i].data;
                }



            // if(d.data.flag=="right")
            // {
            //      for(let i = 0;i<d.data.que_value.length;i++)
            //     {
            //         offset1 = -d.data.data.length/2+offset+d.data.que_typelsit[i].data/2;
            //         offset2 = -d.parent.data.data.length/2+d.parent.data.mid_line+offset+d.data.que_typelsit[i].data/2;
            //         thislink
            //         .insert('path', '.g')
            //              .attr('class', 'link')
            //              .attr('transform-origin', (d) => {
            //                 if (d.parent){           //连线从点击位置逐渐放大
            //                     return chart.oldX + config.paddingLeft + ' ' + chart.oldY;
            //                 }
            //                 return d.x + config.paddingLeft + ' ' + d.y;
            //             })
            //             .attr('transform', (d) => {                //首次渲染进入不放缩
            //                 if (d.parent && chart.first) return 'scale(0.01)';
            //                 return 'scale(1)';
            //             })
            //              .transition().duration(config.animateDuration)
            //              .attr('d', (d) => {
            //                 return generatePath(d, d.parent,chart.rectScale(offset1),chart.rectScale(offset2));;
            //              })
            //              .attr('transform', 'scale(1)')
            //              // .attr('transform', 'translate('+chart.rectScale(offset1)+' ,0)')
            //              .attr('fill', 'none')
            //              .attr('stroke', chart._colors[i+1])
            //              .attr('stroke-width',chart.rectScale(d.data.que_value[i]));
            //     }
            // }


        });



              links.exit()
                     .attr('transform-origin', (d) => {    //连线逐渐缩小到新位置
                         return chart.targetNode.x + config.paddingLeft + ' ' + chart.targetNode.y;
                     })
                     .transition().duration(config.animateDuration)
                     .attr('transform', 'scale(0.01)')
                     .remove();

        function generatePath(node1, node2,offset1,offset2){
            let data = {
                source:{
                    x:node2.x+offset2,
                    y:node2.y+60,
                },
                target:{
                    x:node1.x+offset1,
                    y:node1.y-30,
                },
            }
            link = d3.linkVertical().x(d => d.x).y(d => d.y);
            return link(data);
           //  const path = d3.path();
           //  var offset = 0;
           //
           // path.moveTo(node1.x + config.paddingLeft, node1.y-30);
           //  path.bezierCurveTo(
           //                       node1.x+ config.paddingLeft,(node1.y-30 + node2.y+80)/2 ,
           //                       node2.x+offset+ config.paddingLeft,(node1.y-30 + node2.y+80)/2 ,
           //                       node2.x + offset+config.paddingLeft, node2.y+80
           //                    );
           //  return path.toString();
        }
    }

    /* ----------------------------渲染图标题------------------------  */
    chart.renderTitle = function(){

        chart.svg().append('text')
                .classed('title', true)
                .attr('x', chart.width()/2)
                .attr('y', 0)
                .attr('dy', '2em')
                .text(config.title)
                .attr('fill', config.textColor)
                .attr('text-anchor', 'middle')
                .attr('stroke', config.textColor);

    }

    /* ----------------------------绑定鼠标交互事件------------------------  */
    chart.addMouseOn = function(){

        d3.selectAll('.g')
            .on('click', async function (d) {
                // showData = d.data;
                splitNode = d.data;
                d3.selectAll(".borderRect").attr("fill","#fffdfd");
                d3.select(this).selectAll(".borderRect").attr("fill","red")
                let splitValuse = await d3.json("/getSplitFeatureOrder/", {
                    method: 'POST',
                    body: JSON.stringify({data: d.data.data, type: d.data.typelist,center:d.data.center})
                });
                splitData = splitValuse.data;

                splitData.sort(function (a,b){
                   return  d3.ascending(a.mistake,b.mistake);
                });
                let maxmistake=0;
                for (let i = 0;i<splitData.length;i++)
                {
                    splitData[i].flag = true;
                    let tempmistake = d3.max(splitData,function (d,i){
                        return d3.max(d.mistakelist,function (d) {return d[1];});
                    });
                    if(tempmistake>maxmistake)
                        maxmistake=tempmistake;
                }
                d3.select("#streamView").selectAll("div").remove();
                let con1 = d3.select("#divisionView");
                let j =0;
                for (let i = 0; i < splitData.length; i++) {
                    if(featureNameImportance[splitData[i].index]) {
                        bestsplitValue[splitData[i].index] = splitData[i].bestValue;

                        let con = d3.select("#streamView").append("div").attr("id", "streamView" + splitData[i].index)
                         .style("border-bottom","2px solid #2b8f2b");
                        drawStreamChart(con, d.data, splitData[i], maxmistake, j);
                        if (j==0)
                        {
                            drawAttributeDivisionChart(splitData[i].index,splitValuse.data[i].bestValue,con1);
                        }
                        j++;
                    }

                }
                drawScatterChart(scatterData,typelist,0,1);
                makeClusterSplitData(d.data.center);
                // var parallelLineData = makeParallelLineData(d.data);
                // drawParallelLineChart(parallelLineData);
                // tmp = $("#select_1").val();
                // if(tmp == "0")
                // {
                //     showProjec();
                // }
                // else
                // {
                //     showFeatureScatter();
                // }

                //
                // toggle(d);
                // generateTree(root);
                // chart.renderNode();
                // chart.renderLines();
                // chart.addMouseOn();
            });

        function toggle(d){
            chart.first = true;
            if (d.children){
                d._children = d.children;
                d.children = null;
            }else{
                d.children = d._children;
                d._children = null;
            }
            chart.oldX = d.x;  //点击位置x坐标
            chart.oldY = d.y;  //点击位置y坐标
            chart.targetNode = d;  //被点击的节点
        }
    }

    chart.render = function(){

        // chart.renderTitle();

        chart.renderNode();

        // chart.renderText();

        chart.renderLines();

       chart.addMouseOn();

    }
    chart.box(d3.select("#ruleTreeView"));
    chart.renderChart();
}














